import React from 'react'
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
import News from "../News"
import Index from "../Index"
import Profile from "../Profile"
import List from "../List"
import {TabBar} from 'antd-mobile';
import './index.css'
// 把tabbar的数据放到数组里面
const tabItems = [{
  title: '首页',
  icon: 'icon-ind',
  path: '/home'
},
  {
    title: '找房',
    icon: 'icon-findHouse',
    path: '/home/list'
  },
  {
    title: '资讯',
    icon: 'icon-infom',
    path: '/home/news'
  },
  {
    title: '我的',
    icon: 'icon-my',
    path: '/home/profile'
  }]
// 封装一个渲染tabbar的函数

export default class Home extends React.Component {
  state = {
    selectedTab: this.props.location.pathname,
    //用于控制tabbar是否隐藏
    hidden: false,

  }
  renderTabBarItem() {
    return tabItems.map(item => {
      return (
        <TabBar.Item
          title={item.title}
          key={item.title}
          icon={
            <i className={`iconfont ${item.icon}`}/>
          }
          selectedIcon={<i className={`iconfont ${item.icon}`}/>
          }
          selected={this.state.selectedTab === item.path}
          onPress={() => {
            this.setState({
              selectedTab: item.path,
            });
            this.props.history.push(item.path)
          }}
        >
        </TabBar.Item>

      )
    })
  }
  render() {
    // console.log(this.props.location.pathname)
    return (
      <div className='home'>
        <Route exact path={'/home'} component={Index}/>
        <Route path={'/home/news'} component={News}/>
        <Route path={'/home/list'} component={List}/>
        <Route path={'/home/profile'} component={Profile}/>

        <TabBar
          noRenderContent={true}
          tintColor="#21b97a"
          barTintColor="white"
          hidden={this.state.hidden}
        >
          {this.renderTabBarItem()}
        </TabBar>
      </div>
    );
  }
}
